<template>
  <div class="quality_check">
    <ul class="top_nav">
      <li v-for="item in menus"
          @click="turnTab(item.value)"
          :class="{active:item.value === activeName}">{{item.name}}</li>
    </ul>
    <keep-alive>
      <component :is="activeName" :refreshNum="aa" class="content"></component>
    </keep-alive>
  </div>
</template>
<script>
  import affix from '../../ui-modules/affix/Affix.vue'
  import callQualityCheck from './qualityCheck/callQualityCheck.vue'
  import webchatQualityCheck from './qualityCheck/webchatQualityCheck.vue'
  export default {
    name: 'qualityCheck',
    data () {
      return {
        activeName: 'callQualityCheck',
        aa: 0,
        menus: [
          {name: this.$t('intelligentQualityCheck.intelCallQuality'), value: 'callQualityCheck'},
          {name: this.$t('intelligentQualityCheck.intelWebChatQuality'), value: 'webchatQualityCheck'}
        ]
      }
    },
    components: {
      affix,
      callQualityCheck,
      webchatQualityCheck
    },
    computed: {
    },
    watch: {
    },
    methods: {
      turnTab (value) {
        this.aa = Math.random()
        this.activeName = value
      }
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
@import "../../../assets/common.styl"
  .quality_check
    background #fff
    .content
      padding 20px 20px 0
      height calc(100vh - 140px)
      overflow scroll
    .top_nav
      height 46px
      padding 0 10px
      border-bottom 1px solid #e0e0e0
      line-height 46px
      li
        height 26px
        font-size 14px
        line-height 26px
        padding 0 10px
        display inline-block
        margin 10px 0 0 10px
        cursor pointer
      .active
        background $c-main
        color $cf-white
        border-radius 14px
</style>
